<template>
    <div v-loading="loading">
        <el-card>
            <template #header>
                <div>编辑问卷</div>
            </template>
            <el-form label-width="80px">
                <el-form-item label="问卷名称" prop="papername">
                    <el-input v-model="form.papername"></el-input>
                </el-form-item>

                <!-- 班级 -->
                <el-form-item label="班级名称" prop="classname">
                    <el-select v-model="form.classname">
                        <el-option 
                            v-for="cls in classes" 
                            :key="cls._id" 
                            :label="cls.classname" 
                            :value="cls.classname"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 选项 -->
                <el-form-item label="选项">
                    <el-tree
                        ref="itemsTree"
                        node-key="_id"
                        show-checkbox
                        :data="items"
                        :props="{ label: 'itemname', children: 'children' }"
                        @check-change="itemsCheckChange"
                        :render-after-expand="false"
                    ></el-tree>
                </el-form-item>

                <!-- 大纲 -->
                <el-form-item label="大纲">
                    <el-tree
                        node-key="_id"
                        ref="outlinesTree"
                        show-checkbox
                        :data="outlines"
                        :props="{ label: 'outlinename', children: 'children' }"
                        @check-change="outlinesCheckChange"
                        :render-after-expand="false"
                    ></el-tree>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="editPaperLoading">编辑</el-button>
                    <el-button @click="$router.push({ name: 'PapersIndex' })">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
    props: ['id'], // 接收父组件传递过来的id
    data() {
        return {
            loading: false,
            classes: [], // 定义班级
            items: [], // 定义选项
            outlines: [], // 定义大纲
            paper: {}, // 定义问卷
            form: {
                papername: '',
                classname: '',
                items: [],
                outlines: [],
            },
        };
    },
    async created() {
        await this.getClassesAllLoading(); // 调用获取所有班级的方法
        await this.getItemsLoading(); // 调用获取所有选项的方法
        await this.getOutlinesLoading(); // 调用获取所有大纲的方法
        await this.getPaperLoading(); // 调用获取问卷的方法
    },
    methods: {
        ...mapActions('classes', ['getClassesAll']),
        ...mapActions('items', ['getItems']),
        ...mapActions('outlines', ['getOutlines']),
        ...mapActions('papers', ["getPaper","editPaper","exist"]),

        // 数据回填
        async getPaperLoading() {
            this.loading = true;
            try {
                const { data } = await this.getPaper(this.id);
                this.form.papername = data.papername; // 数据回填 问卷名称
                this.form.classname = data.classname; // 数据回填 班级名称
                this.$refs.itemsTree.setCheckedNodes(data.items); // 数据回填 选项
                this.$refs.outlinesTree.setCheckedNodes(data.outlines); // 数据回填 大纲
                this.paper = data;
            } catch (error) { }
            this.loading = false;
        },

        // 定义选项的方法
        itemsCheckChange(node, flag) {
            // 判断当前节点是否有子节点
            if (node.children.length) return;
            // 判断：只有当前节点被选中，才push到form.items中
            if (flag) {
                this.form.items.push({
                    _id: node._id,
                    itemname: node.itemname,
                });
            } else {
                // 否则，从form.items中删除当前节点
                // 先找到当前节点在form.items中的索引位置
                const pos = this.form.items.findIndex(el => el._id === node._id);
                // 再根据索引位置，删除当前节点
                this.form.items.splice(pos, 1);
            }
        },

        // 定义大纲的方法
        outlinesCheckChange(node, flag) {
            if (node.children.length) return;
            if (flag) {
                this.form.outlines.push({
                    _id: node._id,
                    outlinename: node.outlinename,
                });
            } else {
                const pos = this.form.outlines.findIndex(el => el._id === node._id);
                this.form.outlines.splice(pos, 1);
            }
        },

        // 获取所有班级
        async getClassesAllLoading() {
            this.loading = true;
            try {
                const { data } = await this.getClassesAll();
                this.classes = data.result;
            } catch (error) { }
            this.loading = false;
        },

        // 获取所有选项
        async getItemsLoading() {
            this.loading = true;
            try {
                const { data } = await this.getItems();
                this.items = data;
            } catch (error) { }
            this.loading = false;
        },

        // 获取所有大纲
        async getOutlinesLoading() {
            this.loading = true;
            try {
                const { data } = await this.getOutlines();
                this.outlines = data;
            } catch (error) { }
            this.loading = false;
        },

        async editPaperLoading() {
            this.loading = true;
            try {
                await this.editPaper({
                    id: this.id,
                    data:{
                        papername: this.form.papername,
                        classname: this.form.classname,
                        items: this.form.items,
                        outlines: this.form.outlines,
                    }
                });
                this.$router.push({ name: 'PapersIndex' });
                this.$message.success('编辑成功');
            } catch (error) { }
            this.loading = false;
        },
    }
}
</script>